<template>
	<view>
		<view class="head">
		<view class="top">
		</view>
		<uni-card  style="position: relative; top: -40rpx;" spacing="5px">
				<image :src="shopInfo1.licence" style="width: 100%;"></image>
				<view style="text-align: left;">
					<view class="line1">{{shopInfo1.storeName}}</view>
					<view style="display: flex;margin-top: 1vh;">
						<uni-rate :readonly="true" size="20" :value="shopInfo1.star" />
						{{shopInfo1.star}}分 <view style="margin-left: 5vw;">销量：{{shopInfo1.sales}}</view>
					</view>
					<view style="margin-top: 1vh;">营业时间：{{shopInfo1.week}}</view>
					<view>
						位置：{{shopInfo1.address}}<image style="height: 2vh;width: 4vw;margin-left: 3vw;" @click="daohang" src="/static/images/ys/carFix/plane.png"></image>
					</view>
				</view>
			</uni-card>
			<uni-card>
				<view style="text-align: left;" >
					<view class="line1">服务项目</view>
					<view class="line2" v-for="(item, index) in serviceList" :key="index">
						<view class="lineleft">
							{{item.name}}
						</view>
						<view class="lineright">
							<text style="color: #FF4000; font-size: 35rpx; margin-right:2vw ;">￥{{item.newPrice}}</text>
							<text style=" text-decoration-line: line-through;">￥{{item.oldPrice}}</text>
						</view>
					</view>
					<view style="border: 1rpx solid #F7F7F7;"></view>
				</view>
			</uni-card>
			<uni-card>
				<view style="text-align: left;">
					<view class="line1">服务评价</view>
					<view class="pinglun" v-for="(item, index) in ordersList" :key="index">
						<view class="pinglunleft">
							<u--image shape="circle" width="22vw" height="12vh" :src="item.cheUser.avatar"></u--image>
						</view>
						<view class="pinglunright">
							<view class="pinglun1">
								<view><u--text mode="name"  format="encrypt"></u--text>{{item.cheUser.username}}</view>
								<view>{{item.commentTime}}</view>
							</view>
							<view><uni-rate :readonly="true" size="15" :value="item.star" /></view>
							<view>{{item.comments}}</view>
						</view>
						<view style="border: 1rpx solid #F7F7F7;"></view>
					</view>
				</view>
			</uni-card>
			</view>
			<view class="bottom"><u-button shape="circle" @click="dianjiyuyue" customStyle="color:white;width:60vw;background-color: #0662E6;">立即预约</u-button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 itemId: 2, // 存储从URL中获取的id
				    shopInfo1: [] ,// 存储从服务器获取的数据列表
					filteredServiceList:[],
					serviceList:[],
					ordersList:[]
				
			}
		},
		onLoad(option){
			this.itemId = option.id; // 从 URL 中获取 id 并赋值给 data 中的 itemId
			this.getList1(this.itemId);
		},
		mounted() {
			this.getList2();
			this.getList3();
		},
		
		
		methods: {
			
			//维修列表
			  getList1(id) {
			  		let that=this;
			  this.$http({
			  	url:`/api/shop/manage/${id}`,
			  	method:'GET',
			  	success(res){
			  		that.shopInfo1 = res.data.data;
			  		console.log(res);
			  		console.log("============")
			  		// console.log("repairInfo",this.repairInfo)
			  	}
			  })		
			},
			
			getList3() {
			  		let that=this;
			  this.$http({
			  	url:`/api/orders/orders/list`,
			  	method:'GET',
			  	success(res){
			  		that.ordersList = res.data.rows;
			  		console.log(res);
			  		console.log("============")
			  		// console.log("repairInfo",this.repairInfo)
			  	}
			  })		
			},
			
			
			//维修列表
			  getList2() {
			  		let that=this;
			  this.$http({
			  	url:`/api/service/service/list`,
			  	method:'GET',
			  	success(res){
			  	  that.serviceList = res.data.rows;
					const filteredList = that.serviceList.filter(service => {
					 return service.shopId === that.shopInfo1.Id; // 比较shopId和Id
				  });
					        // 更新filteredServiceList数据
					this.filteredServiceList= filteredList;
			  		console.log(res);
			  		console.log("*********")
					// console.log(this.filteredServiceList)
			  		// console.log("repairInfo",this.repairInfo)
			  	}
			  })		
			},
			
			daohang(){
				uni.navigateTo({
				  url: `/pages/ys/carFix_mendianxiangqing_daohang/carFix_mendianxiangqing_daohang?id=${(this.shopInfo1.id)}`
				})
			},
			dianjiyuyue(){
				uni.navigateTo({
				  url: `/pages/ys/carFix_lijiyuyue/carFix_lijiyuyue`
				})
			},
			
		}
	}
</script>

<style>
	.bottom{
		padding-top: 1vh;
		height: 8vh;
		box-sizing: border-box;
		position: fixed;
		background-color: white;
		bottom: 0vh;
		width: 100%;
	}
	.pinglunleft{
	}
	.pinglunright{
	}
	.pinglun{
		margin-top: 3vh;
		display: flex;
	}
	.pinglun1{
		width: 60vw;
		display: flex;
		justify-content: space-between;
	}
	.line2{
		display: flex;
		justify-content: space-between;
		line-height: 8vh;
	}
	.line1{
		margin-top: 2vh;
		font-size: 3vh;
		font-weight: 600;
	}
	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>
